import type { DirectiveBinding } from 'vue'

export default {
  install(app: any) {
    app.directive(
      'Lazy',
      (el: HTMLImageElement, binding: DirectiveBinding) => {
        const observe = new IntersectionObserver(
          ([{ intersectionRatio }]) => {
            if (intersectionRatio) {
              // 把传入的路径替换成图片路径
              el.src = binding.value
              // 替换完成，停止监听
              observe.unobserve(el)
            }
          }
        )
        // 开始监听元素
        observe.observe(el)
      }
    )
  }
}
